<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>系统通知</title>
    <link rel="stylesheet" href="../../css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../../font/iconfont/iconfont.css">
    <link rel="stylesheet" href="../../font/iconfont/iconfont.ttf">
    <link rel="stylesheet" href="../../css/common.css"/>
    <link rel="stylesheet" href="../../js/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" href="../../css/model.css">
    <style>
        .icon-font {
            font-family: iconfont;
        }

        #myTab li a {
            width: auto;
        }

        .form {
            background-color: white;
            padding-left: 20px;
            margin-top: 20px;
        }

        .type {
            padding-top: 20px;
            padding-bottom: 100px;
        }

        .top {
            clear: both;
            padding-top: 10px;
        }

        .top2 {
            margin-top: 10px;
        }

        .type .head {
            text-align: center;
        }

        .border {
            border-bottom: 1px solid #eee;
        }
        .point{
            font-size: 60px;
            float: left;
            margin-top: -56px;
            z-index: 999;
            right: 10px;
            color: red;

        }

        .collection_confirm_box .model_content {
            position: absolute;
            width: 700px;
            height: 700px;
            padding: 30px 40px;
            left: 50%;
            top: 50%;
            margin-left: -350px;
            margin-top: -400px;
            background-color: #fff;
            overflow: hidden;

        }

        .collection_confirm_box .model_info_cont img {
            height: 120px;
        }

        .bootstrap-table .table-responsive {
            margin-top: 0px;
        }

        .bootstrap-table thead th .th-inner {
            text-align: center;
            background-color: #FFEDDF;

        }

        .icon-left_s {
            font-size: 30px;
        }

        .text {
            min-height: 50px;
        }

        .text2 {
            text-align: center;

            margin-top: 30px;
        }

        .back {
            float: left;
            margin-left: -40px;
        }

        .left {
            border-right: 1px solid #eee;
        }

        .icon-delete {
            font-size: 20px;
        }
        .delete_box .model_info_title{
            font-size: 18px;
        }
        .delete_box .model_content {
            position: absolute;
            width: 550px;
            height: 240px;
            padding: 30px 40px;
            left: 50%;
            top: 50%;
            margin-left: -350px;
            margin-top: -260px;
            background-color: #fff;
            overflow: hidden;

        }
        .delete_box .model_btn_save{
            border: 1px solid #eee;
            width: 120px;
            height: 45px;
            text-align: center;
            background-color: white;
            float: left;
        }
        .delete_box .model_btn_cancel{
            width: 120px;
            height: 45px;
            text-align: center;
            margin-left: 30px;
            float: left;
        }
    </style>
</head>
<body>

<!--删除-->
<div class="model_box delete_box">
    <div class="model_content ">
        <div class="close_model_box icon-font icon-delete2circlecoloring" onclick="closeEvaluation()"></div>
        <div class="model_info">
            <div class="model_info_title ">
              <strong> 删除通知</strong>
            </div>
            <div class="model_info_cont">
                确定要删除这条通知？<br>
                Are you sure you want to delete this notification?
            </div>
        </div>
        <div class="model_bottom_bar">
            <div class="model_btn_save ">
                <div class="top">确认(determine)</div>
            </div>
            <div class="model_btn_cancel btn-2">
                <div class="btn-2 top">取消(cancel)</div>
            </div>
        </div>
    </div>
</div>
<!--通知-->
<div class="model_box collection_confirm_box">
    <div class="model_content ">
        <div class="back row">
            <div class="col-lg-2 col-sm-2"><span class="icon-font icon-left_s c"></span></div>
            <div class="col-lg-6 col-sm-6">
                <div class="title_zh">返回</div>
                <div class="title_en">return</div>
            </div>

        </div>

        <div class="close_model_box icon-font icon-delete2circlecoloring" onclick="closeNotification()"></div>
        <div class="model_info">

            <div class="model_info_cont">
                <div class="row">
                    <div class="col-lg-9 col-sm-8 ">
                        <div>这里是系统通知的标题</div>
                        <div>here is the system notification title<br></div>
                        <div class="top2">来自 name的推荐</div>
                        <div>fromnameEnrecommended</div>
                        <div class="top2">2018.01.09</div>

                    </div>
                    <div class="col-lg-3 col-sm-4"><img src="../../image/myorder/food.png"></div>


                </div>
                <div class="top2 text">
                    feawfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfg
                    gfawefserdedgbserrrrrrrrrrrrbvvvvvvvvvvvvvvvvvvewgaffaegwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwweg
                    vaweweweweweweweweweweweweweweevawvaweveawvaweawevavwewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewe
                    vaweeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
                    veawewrgbvertbhnrtegtnbfwevaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </div>

            </div>
        </div>
    </div>
</div>
<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#System" data-toggle="tab">
            系统通知</br>System notification
        </a>
    </li>
    <li>
        <a href="#Customer" data-toggle="tab">
            <div>联系客服<br>Contact Customer Service</div>
        </a>
    </li>

</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="System">
        <div class="form">
            <div class="type">
                <div class="col-lg-12 col-sm-12 row head border">
                    <div class="col-lg-2 col-sm-2 active" onclick="openNotification()">
                        全部</br>
                        <span>All</span>
                    </div>
                    <div class="col-lg-2 col-sm-3 btns" onclick="getlist('unread')">
                        <div>未读</div>
                        <div>unread</div>
                    </div>
                    <div class="col-lg-2 col-sm-2 btns" onclick="getlist('read')">
                        已读</br> have read
                    </div>
                    <div class="top"></div>
                </div>
                <div class="top">
                    <table class="table" id="all-natification-table"></table>
                </div>

            </div>
        </div>
    </div>
    <div class="tab-pane fade in active" id="Customer">
        <div class="form">
            <div class="type ">
                <div class="border">
                    <div>联系客服</div>
                    <div>contoct customer service</div>
                    <div class="top2"></div>
                </div>
                <div class="row text text2 ">
                    <div class="col-lg-6 col-sm-6 left">
                        <img src="../../image/customer.png">
                        <div>在线客服 <br> Online service</div>
                    </div>
                    <div class="col-lg-6 col-sm-6">
                        <img src="../../image/phone.png">
                        <div>客服电话 <br> Consumer hotline <br> 183 8826 8904</div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

<div id="myTabContent2" class="tab-content">
    <div class="tab-pane fade in active" id="all">

    </div>
    <div class="tab-pane fade in active" id="unread">
        <table class="table" id="unread-natification-table"></table>
    </div>
    <div class="tab-pane fade in active" id="read">
        <table class="table" id="read-natification-table"></table>
    </div>
</div>

</body>
<script rel="script" src="../../js/jquery.min.js"></script>
<script rel="script" src="../../js/bootstrap.min.js"></script>
<script rel="script" src="../../js/bootstrap-table/bootstrap-table.min.js"></script>
<script rel="script" src="../../js/common.js"></script>
<script>
    $(function () {
        init() ;

    })

    /*
     * @description :
     * @params: 
     * @author : peng huaneng
     * @date : 2018/1/19 10:47
     */
    function init() {
        // 默认查看全部
        getlist("all","all-natification-table");
        //加载按键点击事件
        getListNotification();
    }
    
/*
 * @description : 获取标签点击事件，跳转前做 数据加载
 * @params: 
 * @author : peng huaneng
 * @date : 2018/1/19 10:45
 */
    function getListNotification() {
        $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
            var activeTab = $(e.target).text();
            if (activeTab.indexOf("全部") != -1) {
                  getlist("all","all-natification-table");
            } else if (activeTab.indexOf("未读") != -1) {

                  getlist("unread","unread-natification-table");
            } else if (activeTab.indexOf("已读") != -1) {

                  getlist("read","read-natification-table");
            }

        })
    }


    /*
     * @description : 获取订单列表
     * @params:
     * @author : peng huaneng
     * @date : 2018/1/18 10:29
     */
    function getlist(type, id) {
        // 1 ajax请求 返回结果

        //2 将结果 封装到表格
        $('#' + id).bootstrapTableEx({

            height: $(window).height() - 54,
            queryParams: function (params) {
                return params;
            },
            columns: [{
                field: 'id',
                title: 'id',
                "visible": false
            }, {
                field: 'title',
                title: '标题<br>title',
                formatter: function (value, row, index) {
                    var html = '';
                    if (row.status == 0) {//未读
                        html = '<span class="point">.</span><span >&nbsp;</span>' + row.title;
                    } else {
                        html = '<span >&nbsp;&nbsp;&nbsp;&nbsp;</span>' + row.title;
                    }

                    return html;
                }
            }, {
                field: 'source',
                title: '来源<br>source'
            }, {
                field: 'time',
                title: '时间<br>time'
            }, {
                field: 'operating',
                title: '操作<br>operating',
                formatter: function (value, row, index) {
                    var html = '';
                    html = '<div style="text-align: center"><div class="icon-font icon-delete" onclick="deleteData(' + row.id + ')"></div></div>';
                    return html;
                }
            }
            ],
            data: [{
                "id": 1,
                "title": "小伙郎新品上线",
                "source": "小伙郎食品部",
                "time": "2017-8-15",
                "status": "1"
            }, {
                "id": 2,
                "title": "浪莎新品上线",
                "source": "浪莎销售部",
                "time": "2017-8-12",
                "status": 0
            }]
        });
    }

    /*
     * @description : 删除数据
     * @params: 
     * @author : peng huaneng
     * @date : 2018/1/26 17:28
     */
    function deleteData(id) {
        //弹出删除框
        $('.delete_box').fadeIn(300);
    }

    //打开通知
    function openNotification() {
        console.log(1);
        $('.collection_confirm_box').fadeIn(300);
    }

    //关闭通知
    function closeNotification() {
        $('.collection_confirm_box').fadeOut(300);
    }
</script>
</html>